<template>
    <el-row  >
       <el-col :span="2">
           <el-button type="primary" plain>团队</el-button>
       </el-col>
       <el-col :span="2">
           <el-button type="primary" plain>任务</el-button>
       </el-col>
      
   </el-row>
   <el-divider />
   <el-row>
       <el-col :span="1" v-for="(tab,index) in tabs">
            <el-link :underline="false" type="primary" @click="projectSearch(index)">{{tab}}</el-link>
       </el-col>
       <el-col :span="10"></el-col>
       <el-col :span="4">
           <el-input v-model="input" placeholder="加班搜索" clearable />
       </el-col>
       <el-col :span="2">
        
           <el-button type="primary" @click="search">  
               <el-icon><Search /></el-icon>Search
           </el-button>
       </el-col>
       <el-col :span="2">
       
           <el-button  type="success" @click="addTask">  
               <el-icon><Plus /></el-icon>新增
           </el-button>
       </el-col>
   </el-row>
   <el-divider />
   <el-table :data="tableData"
    style="width: 100%"
     height="280"
     :default-sort = "{prop: 'serialNumber', order: 'ascending'}"
     ref="multipleTable"
     @selection-change="handleSelectionChange"
     >
       <el-table-column type="selection" width="100" />
       <el-table-column prop="gId" label="员工编号" width="120" />
       <el-table-column prop="workStatus" label="是否加班" width="120" />
       <el-table-column prop="jbTime" label="加班时长" width="150" />
       <el-table-column prop="cause" label="加班原因" width="250" />
       
       <el-table-column label="操作" fixed="right">
           <template #default="scope">
               <el-button size="small" circle @click="handleEdit(scope.$index, scope.row)"
               >
                   <Edit style="width: 1em; height: 1em; " />
                </el-button>      
               <el-button 
               size="small"
               type="danger" 
               @click="handleDelete(scope.$index, scope.row)"
                circle >
                <el-icon><Delete /></el-icon>
               </el-button> 
           </template>
       </el-table-column>
       
   </el-table>
   <el-row>
       <el-col :span="4"></el-col>
       <el-col :span="10">
           <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="currentPage4"
           :page-sizes="[5, 10, 15, 20]"
           :page-size="5"
           layout="total, sizes, prev, pager, next, jumper"
           :total="400">
           </el-pagination>
       </el-col>
      
    </el-row>

  
</template>
<script>

export default{
   data(){
       return{
           tabs:['全部','已完成','未完成'],
           input:'',//搜搜
           status:"exception",//项目进度
           multipleSelection: [],//选中的项
           tableData:[
               {gId:'1',workStatus:'是',jbTime:'2.5小时',cause:'赶项目工期'},
               {gId:'4',workStatus:'是',jbTime:'4小时',cause:'BUG检测，项目工期'},
               {gId:'3',workStatus:'是',jbTime:'1小时',cause:'临时会议文件'},
               {gId:'2',workStatus:'否',jbTime:'0.5小时',cause:'赶项目工期'},
               {gId:'2',workStatus:'是',jbTime:'2.5小时',cause:'赶项目工期'},
               {gId:'4',workStatus:'是',jbTime:'1.5小时',cause:'组织团队项目'}
               
           ],
           currentPage4: 1
       }
   },
   methods:{
       //给定条件搜索项目展示
       projectSearch(index){

       },
       //模糊搜索项目
       search(){

       },
       addTask(){
         
       },
       //选中
       handleSelectionChange(val) {
       this.multipleSelection = val;
     },
     handleEdit(index, row) {
       console.log(index, row);
     },
     handleDelete(index, row) {
       console.log(index, row);
     },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
     }
      }
   }

</script>
<style>

</style>